<template>
  <div class="polygon_tab videotab">
    <div class="p_tab_title">
      视频监控（含无人机）
      <i class="videotab_title_icon"></i>
    </div>
    <div class="polygon_tab_content">
      <div class="per_item" v-for="(per, index) of videos" :key="index">
        <video-player ref="`videoPlayer${index}`" class="video-player vjs-custom-skin" :options="per.playerOptions" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

import posterImg_1 from '../../assets/img/poster_1.png'
import posterImg_2 from '../../assets/img/poster_2.png'
import posterImg_3 from '../../assets/img/poster_3.png'
import posterImg_4 from '../../assets/img/poster_4.png'
import posterImg_5 from '../../assets/img/poster_5.png'
Vue.use(VideoPlayer)
// Vue.use(hls)
const defaultOption = {
  autoplay: false, // 如果true,浏览器准备好时开始回放。
  loop: true, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  // aspectRatio: '16:9',
  // fluid: true,
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  hls: true,
  height: 201,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按钮
  }
}
export default {
  name: 'VideoTab',
  components: {},
  data() {
    return {
      videos: [
        {
          playerOptions: {
            ...defaultOption,
            poster: posterImg_1,
            sources: [
              {
                type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: 'http://60.208.121.230:9980/live/774923109_37010000001311007487_0_0.m3u8' // url地址
              }
            ]
          }
        },
        {
          playerOptions: {
            ...defaultOption,
            poster: posterImg_2,
            sources: [
              {
                type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: 'http://60.208.121.230:9980/live/775109030_37140000001311007595_0_0.m3u8' // url地址
              }
            ]
          }
        },
        {
          playerOptions: {
            ...defaultOption,
            poster: posterImg_3,
            sources: [
              {
                type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: 'http://60.208.121.230:9980/live/775109030_37140000001311007595_0_0.m3u8' // url地址
              }
            ]
          }
        },
        {
          playerOptions: {
            ...defaultOption,
            poster: posterImg_4,
            sources: [
              {
                type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: 'http://60.208.121.230:9980/live/775109023_37010000001311007359_0_0.m3u8' // url地址
              }
            ]
          }
        },
        {
          playerOptions: {
            ...defaultOption,
            poster: posterImg_5,
            sources: [
              {
                type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: 'http://60.208.121.230:9980/live/775109013_37030000001311000160_0_0.m3u8' // url地址
              }
            ]
          }
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss">
.videotab {
  position: absolute;
  top: 785px;
  left: 10px;
  width: 1890px;
  height: 288px;

  background-image: url('../../assets/img/polygon_5.png');
  background-size: contain;

  .p_tab_title {
    top: 20px;
    left: 60px;
  }

  .videotab_title_icon {
    position: absolute;
    width: 29px;
    height: 25px;
    top: -1px;
    right: -25px;
    background-image: url('../../assets/img/bofang-3.png');
    background-size: contain;
  }

  .polygon_tab_content {
    top: 65px;
    bottom: 20px;
    left: 50px;
    right: 50px;

    display: flex;
  }

  .per_item {
    margin-left: 30px;
    flex: 1;
    height: 100%;
    border: 1px solid #23b04b;
    cursor: pointer;
    transition: all 0.5s;

    & ~ .per_item {
      margin-left: 30px;
    }

    &:hover {
      // filter: drop-shadow(0 0 20px rgba(14, 166, 229, 0.5));
      transform: translate3d(0, -10px, 20px) scale(1.01);
      perspective: 500px;
    }

    .video-player {
      width: 100%;
      height: 100%;
    }

    .vjs-custom-skin > .video-js {
      height: 100%;
    }
  }
}
</style>
